<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>综合案例</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
</head>
<body>
    <script>
        //添加SVG画布
        var w=400;
        var h=400;

        //在body里添加svg,并且初始化宽高
        var svg=d3.select('body').append('svg').attr('width',w).attr('height',h);

        //画布周边的空白
        var padding={left:50,right:30,top:20,bottom:20};
       
        //定义数据和比例尺
        var dataset=[10,20,30,50,33,24,12,5];
        //定义颜色数据
        var colorset=['red','blue','green','yellow','orange','pink','yellowgreen','gold'];

        //x轴的比例尺(序数比例尺)
        var xScale=d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0,w-padding.left-padding.right])

        //y轴的比例尺(线性比例尺)
        var yScale=d3.scale.linear().domain([0,d3.max(dataset)])
                                               .range([h-padding.top-padding.bottom,0])

        //定义x坐标轴
        var xAxis=d3.svg.axis().scale(xScale).orient('bottom');

        //定义y坐标轴
        var yAxis=d3.svg.axis().scale(yScale).orient('left');

        //矩形之间的空白
        var rectPadding=4;

        //添加矩形元素
        var rect=svg.selectAll('.MyRect')
                          .data(dataset)
                          .enter()
                          .append('rect')
                          .attr('class','MyRect')
                          .style({'stroke': 'black', 'stroke-width': 1})
                          .attr('transform',`translate(${padding.left},${padding.top})`)
                          .attr('x',(value,index)=>{
                              return xScale(index)+rectPadding/2;
                          })
                          .attr("y",function(d){
                              // return yScale(d);
                              var min=yScale.domain()[0];
                              return yScale(min);
                          })
                          .transition()
                          .delay((value,index)=>{
                            return index*300;
                          })
                          .duration(1500)
                          .ease('bounce')
                          .attr('y',value=>{
                              return yScale(value);
                          })
                          .attr('width',xScale.rangeBand()-rectPadding)
                          .attr('height',(value)=>{
                              return h-padding.top-padding.bottom-yScale(value);
                          })
                          .attr('fill',function(value,index){
                                return colorset[index];
                            })


                          //添加交互事件
                          svg.selectAll('.MyRect')
                          .on('mouseover',function(value,index){
                            d3.select(this).attr('fill','gold');
                          }).on('mouseout',function(value,index){
                            console.log(this)
                            d3.select(this).transition()
                                           .duration(300)
                                           .attr('fill',function(d,i){
                                              return colorset[index]
                                           })
                          })

        //添加文字元素             
        //添加文字元素
        var texts = svg.selectAll(".MyText")
                .data(dataset)
                .enter()
                .append("text")
                .attr("font-size","12")
                .style('color','white')
                .attr("transform","translate(" + padding.left + "," + padding.top + ")")
                .attr("x", function(d,i){
                    return xScale(i) - rectPadding;
                    // return xScale(i);
                } )
                .attr("y",function(d){
                    // return yScale(d);
                    var min=yScale.domain()[0];
                    return yScale(min);
                })
                .transition()
                .delay((value,index)=>{
                  return index*300;
                })
                .ease('bounce')
                .duration(1500)
                .attr("y",function(d){
                    return yScale(d);
                })
                .attr("dx",function(){
                    return (xScale.rangeBand() - rectPadding)/2;
                })
                .attr("dy",function(d){
                    return 20;
                })
                .text(function(d){
                    return d;
                });

        //添加x轴
        svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (h - padding.bottom) + ")")
        .call(xAxis); 

        //添加y轴
        svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);
    </script>
</body>
</html>